<template>
  <el-dialog :title="celldbData.genNume" :visible.sync="open" width="70%" :before-close="handleClose"
             class="jian demandFormVisible_dialog" append-to-body>
    <div class="headerInfoButton" v-if="isType=='1'">
      <el-button type="success" plain @click="onInfoTap(0)">案卷信息</el-button>
      <el-button type="primary" plain @click="onInfoTap(1)">文件信息</el-button>
    </div>
    <div class="headerInfoButton">
      <el-button type="primary" plain @click="onInfoTap(1)">文件信息</el-button>
    </div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-tabs type="border-card" class="box-card1jian" v-model="tabsValue">
          <el-tab-pane label="附件列表" name="first">
            <ul class="tablistClass tablist-scroll" style="overflow-y: auto; max-height: 700px;">
              <el-tooltip class="item" v-for="(item, index) in celldbData.efileList" :key="index"
                          effect="dark" :content="item.fieldName"
                          placement="right">
                <li :class="activeNameChider == index ? 'chiderAvtia' : ''" class="flex-row-bowtte" @click="onClickInfoTap(item, index)">
                  <p style="width: 190px" class="text-ellipsis">{{ index + 1 }}.{{ item.fieldName }}</p>
                </li>
              </el-tooltip>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="18">
        <el-card class="box-cardjian">
          <filePreviewTemplate v-if="item" :item="item"></filePreviewTemplate>
        </el-card>
      </el-col>
    </el-row>

    <mt-popup v-model="visibleOpen" stretch position="right" style="height:100%;width: 25%; padding:0 20px">
      <div class="popup-main">
        <ul class="dataList info-scroll" style="overflow-y:scroll;height:calc(100vh - 95px)">
          <li v-for="(item, index) in dataInfo" :key="index">
            <label>{{ item.label }}:</label>
            <p
              v-if="item.prop == 'controlType'">
                <span v-for="(i, idx) in dict.type.CONTROLTYPE" :key="idx">
                  {{ item.value == i.value ? i.label : '' }}
                </span>
            </p>
            <p
              v-else-if="item.prop == 'mj'">
                <span v-for="(i, idx) in dict.type.MJ" :key="idx">
                  {{ item.value == i.value ? i.label : '' }}
                </span>
            </p>
            <p v-else class="nowrap-1">{{ item.value }}</p>
          </li>
        </ul>
      </div>
    </mt-popup>
  </el-dialog>
</template>

<script>
import filePreviewTemplate from "@/views/information/receivingManagement/filePreviewTemplate";

export default {
  name: "jianDetail",
  props: ["open", "celldbData", 'isType'],
  archive_Dicts: ['CONTROLTYPE', 'MJ'],
  components: { filePreviewTemplate },
  data() {
    return {
      tabsValue: "first", //默认显示第文件类型的第一个
      activeNameChider: 0, //初始化切换默认显示
      item: "",
      visibleOpen: false,
      dataInfo: []
    }
  },
  watch: {
    celldbData: {
      handler(valNew) {
        console.log(valNew, '----------')
        this.item = {
          DOC_FILE_TYPE: valNew.efileList[0].docFileType,
          path: valNew.efileList[0].path
        } //文件预览显示第一个
      },
      immediate: true
    }
  },
  methods: {
    //点击文件 打开对应的文件
    onClickInfoTap(item, index) {
      var that = this;
      that.activeNameChider = index //切换显示数据
      this.item = {
        DOC_FILE_TYPE: item.docFileType,
        path: item.path
      } //文件预览显示第一个
    },
    onInfoTap(e) {
      this.visibleOpen = true;
      if (e == 1) {
        this.dataInfo = this.celldbData.tableColumns
      } else {
        this.dataInfo =  this.celldbData.folderInfo
      }
    },
    //关闭
    handleClose() {
      this.$emit("detailsHandleClose")
    },
  }
}
</script>

<style lang="less" scoped>
ul,
li,
p,
div {
  padding: auto;
  margin: 0;
}

// /deep/.el-card__body {
//   padding: 0;
// }

/deep/.el-dialog {
  margin: 25px auto 0 !important;
}

// .el-dialog__body {
//   padding: 10px !important;
// }

/deep/.el-tabs--border-card>.el-tabs__content {
  padding: 0 !important;
}

/deep/.el-card__body {
  padding: 0;
}

.el-col-17 {
  width: 74.83333% !important;
}

.ajinfo {
  position: absolute;
  top: 16px;
  right: 76px;
  color: #fff;
  font-size: 18px;
}

.dataList li {
  font-size: 16px;
  line-height: 50px;
  border-bottom: 1px dashed #cccccc4d;
}

.dataList li p {
  max-width: 302px;
  display: inline-block
}

.dataList li label {
  font-weight: bold;
  text-align: right;
  margin-right: 10px;
}


.tablist-scroll {
  overflow-y: scroll;
  height: 486px;
}

.box-card1jian {
  height: 800px;
}

.box-cardjian {
  height: 800px;
  //overflow-y: auto;
}

.itemList-scroll {
  overflow-y: scroll;
  height: 256px;

}

.conterScroll {
  overflow: scroll;
  height: 730px;
}

.el-dialog {
  margin-bottom: 0 !important;
}

.popup-main .el-tabs__item {
  height: 69px !important;
  line-height: 69px !important;
  font-size: 17px !important;
}

.tablistClass {
  padding: 0px 15px 10px;
}

.tablistClass li {
  height: 40px;
  line-height: 40px;
  font-size: 16px;

}

.chiderAvtia {
  border-bottom: 1px solid #409EFF;
  color: #409EFF;
}

.headerInfoButton {
  position: absolute;
  top: 16px;
  right: 60px;
}

::v-deep .el-dialog__body {
  padding: 10px 20px 25px !important;
}

.margin_t {
  margin-top: 10px;
}

.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-row-bowtte {
  display: flex;
  flex-direction: row;
  justify-content: space-between
}

.itemList {
  padding: 10px 15px 10px;
}

.itemList p {
  line-height: 38px;
  display: block;
}



.demandFormVisible_dialog {
  .el-dialog__wrapper {
    pointer-events: none;

    ::v-deep .el-dialog {
      pointer-events: auto;
    }
  }
}
</style>
